<template>
  <div class="container">
    <van-nav-bar left-arrow @click-left="$router.back()" title="编辑资料" right-text="保存"></van-nav-bar>
    <!-- 用户资料 -->
    <van-cell-group>
      <van-cell is-link title="头像" @click="showPhoto=true" center>
        <van-image slot="default" width="1.5rem" height="1.5rem" fit="cover" round :src="photo" />
      </van-cell>
      <van-cell is-link title="名称" @click="showName=true" :value="user.name" />
      <van-cell is-link title="性别" @click="showGender=true" :value="user.gender===0?'男':'女'" />
      <van-cell is-link title="生日" @click="openDate()" :value="user.birthday" />
    </van-cell-group>
    <van-popup v-model="showPhoto" position="bottom">
      <input type="file" @change="preview" ref="fileInput" style="display:none">
      <van-cell value="本地相册选择" @click="$refs.fileInput.click()" is-link />
      <van-cell value="拍照" is-link />
    </van-popup>
    <van-popup v-model="showName" position="bottom">
      <van-field v-model="user.name" required placeholder="请输入用户名" />
    </van-popup>
    <van-popup v-model="showGender" position="bottom">
      <van-cell value="男" @click="changeGender(0)" is-link />
      <van-cell value="女" @click="changeGender(1)" is-link />
    </van-popup>
    <van-popup v-model="showBirthday" position="bottom">
      <van-datetime-picker title="选择生日" v-model="nowDate" type="date" :min-date="minDate" :max-date="maxDate" @cancel="showBirthday=false" @confirm="confirmDate" />
    </van-popup>
  </div>

</template>

<script>

// 导入
import dayjs from 'dayjs'
// 导入
import { getUserProfile } from '@/api/user'
export default {
  name: 'user-profile',
  data () {
    return {
      // 弹窗控制
      showPhoto: false,
      showName: false,
      showGender: false,
      showBirthday: false,
      nowDate: new Date(),
      minDate: new Date('1950-01-01'),
      // 日期控件 最大可选日期
      maxDate: new Date(),
      // 默认用户信息
      photo: 'https://img.yzcdn.cn/vant/cat.jpeg',
      user: {
        name: '默认信息',
        gender: 0,
        birthday: '2019-10-10'
      }
    }
  },
  methods: {
    // 选择图片预览
    // 预览图片
    preview () {
      // 获取当前选择的文件对象
      const file = this.$refs.fileInput.files[0]
      // 从你选择的文件对象读取文件信息=>base64编码格式
      const fr = new FileReader()
      fr.readAsDataURL(file)
      fr.onload = () => {
        // 显示转换的图片
        this.photo = fr.result
        // 关闭弹出
        this.showPhoto = false
      }
    },
    save () {
      this.$toast.success('保存成功')
    }
  },
  // 打开选择日期
  openDate () {
    // 有生日数据
    if (this.user.birthday) {
      this.nowDate = new Date(this.user.birthday)
    }
    this.showBirthday = true
  },
  confirmDate (value) {
    console.log('选择完日期: value')
    // 确认时间后  把Date转换成String
    this.user.birthday = dayjs(value).format('YYYY-MM-DD')
    this.showBirthday = false
  },
  changeGender (gender) {
    // 选择性别
    this.user.gender = gender
    this.showGender = false
  },

  async getUserProfile () {
    const { status, data } = await getUserProfile()
    console.log(data)
    if (status === 200) {
      this.user = data
      this.photo = data.photo
    }
  }
}
</script>

<style scoped lang='less'></style>
